<template>
	<view class="home">

		<!-- <u-image mode="aspectFill" style=" width: 100%; height:40vh ;   position: relative;top: 0;" :src="img"></u-image> -->

		<img mode="aspectFill" style=" width: 100%; height:40vh ;   position: relative;top: 0;" :src="img">
		<view class="content">
			<!-- 	<scroll-view class="scrollviewCss" :scroll-y="true" :show-scrollbar="false" :refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="45" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrollBottem"> -->
			<view class="header">
				<view class="one">
					<view style=" width: 120rpx;height: 120rpx;float: left;">
						<view class="hole" :data-content='YCStotal'></view>
					</view>
					<view class="title" style="	font-size: 36rpx;font-weight: bold;">

						{{ cheliang == undefined||cheliang.vehicleName==undefined ? '车辆未选择' : cheliang.vehicleName }}
						<view style="font-size: 30rpx;color: #999999;margin-top: 28rpx;">
							车辆号牌
							<span style="float: right;" @click="xuanze" v-if=" isXuanze == 0 ">选择 &nbsp;></span>

							<span style="float: right;" v-else @click="tuihai">
								退还 &nbsp;>
							</span>

						</view>
					</view>
				</view>
				<view>
					<u-grid :col="3" :border="false">
						<u-grid-item @click="request1(999)">
							<u-image width="72rpx" height="72rpx" :src="selectNo==1 ? select_1 : select1"
								class="images"></u-image>
							<view class="grid-text">即超时: {{JCStotal}}</view>
						</u-grid-item>
						<u-grid-item @click="request2(999)">
							<u-image width="72rpx" height="72rpx" :src="selectNo==2 ? select_3 : select3"
								class="images"></u-image>
							<view class="grid-text">全部工单: {{YCStotal}}</view>
						</u-grid-item>
						<u-grid-item @click="request3(999)">
							<u-image width="72rpx" height="72rpx" :src="selectNo==3 ? select_2 : select2"
								class="images"></u-image>
							<view class="grid-text">已超时: {{YWCtotal}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view v-if="list.length > 0">
				<view class="vis" style="margin-bottom: 10px;" v-for="(item,index) in list" :key="index"
					@click="Toblwc(item)">

					<view style="padding: 12rpx 0;display: inline-table; width: 100%;  ">
						<span style="float: left;margin-left: 2px;display: flex;align-items: center;">
							{{item.orderNo}}&nbsp;&nbsp;{{item.deptName}}
							<span v-if="item.orderState == 10">
								<u-tag text="备料" mode="dark" bg-color="#ff8911" color="#fff" border-color="#ff8911"
									style="margin:-2px 0 0 10rpx;" />
							</span>
							<span v-if="item.orderState ==  20">
								<u-tag text="核料" mode="dark" bg-color="#ff8911" color="#fff" border-color="#ff8911"
									style="margin:-2px 0 0 10rpx;" />
							</span>
							<span v-if="item.orderState ==  30">
								<u-tag text="取件" mode="dark" bg-color="#39a9ff" color="#fff" border-color="#39a9ff"
									style="margin:-2px 0 0 10rpx;" />
							</span>

							<span v-if="item.orderState ==  40">
								<u-tag text="配送" mode="dark" bg-color="#4a9add" color="#fff" border-color="#4a9add"
									style="margin:-2px 0 0 10rpx;padding: 0 7px;" />
							</span>
							<span v-if="item.orderState ==  50">
								<u-tag text="完成" mode="dark" bg-color="#1aa034" color="#fff" border-color="#1aa034"
									style="margin:-2px 0 0 10rpx;padding: 0 7px;" />
							</span>
							<!-- 			<span v-if="item.orderState ==  50">
									<u-tag text="配送完成" mode="dark" bg-color="#4a9add" color="#fff"
										border-color="#4a9add" style="margin:-2px 0 0 10rpx;" />
								</span> -->
						</span>

						<i class="iconfont icon-yuanxingdecircular223" v-if="item.delayFlag==2"
							style="float: right;color: #f42d2d;font-size: 38rpx;"></i>
						<i class="iconfont icon-shalou" v-if="item.delayFlag==1"
							style="float: right;color: #2c6ee5;font-size: 38rpx;padding: 0 7px;"></i>
					</view>
					<view style="padding: 12rpx 0;display: flex;    align-items: center;    width: 100%;">
						<i class="iconfont icon-dingwei"
							style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
						<view style="float: left;padding-top: 2px;">{{item.startAddress}} - {{item.endAddress}}
						</view>
					</view>
					<view style="padding: 12rpx 0;display: flex;    align-items: center;    width: 100%;">
						<i class="iconfont icon-shijian"
							style="font-size: 36rpx;padding-right: 7px;float: left;color: #9e9e9e;"></i>
						<view style="float: left;padding-top: 2px;">时限：{{item.timeLimit}}</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list"></u-empty>

		</view>
		<!-- 结束 -->




	</view>
</template>
<script>
	import {
		OrderList,
		UserList,
		UserBack,

	} from "@/pages/api/api"
	export default {
		data() {
			return {
				// contnetVar: "0",
				img: require('../../static/images/homebg.jpg'),
				select1: require('../../static/images/1.png'),
				select2: require('../../static/images/2.png'),
				select3: require('../../static/images/3.png'),
				select_1: require('../../static/images/1_1.png'),
				select_2: require('../../static/images/2_1.png'),
				select_3: require('../../static/images/3_1.png'),
				selectNo: 2,
				JCStotal: 0,
				YCStotal: 0,
				YWCtotal: 0,
				list: [],
				// triggered: false,
				cheliang: undefined,
				isXuanze: 0
			}
		},
		onShow() {
			const token = uni.getStorageSync('token');
			if (token) {
				this.UserLists();
				this.request2(999)
			} else {
				uni.reLaunch({
					url: '/pages/index/login'
				});
			}

		},
		created() {
			this.request1(1)
			// this.request2(999)
			this.request3(1)


		},
		mounted() {
			uni.showTabBar()
		},
		onPullDownRefresh() {
			console.log('refresh');
			let that = this;
			setTimeout(function() {
				if (that.selectNo == 1) {
					that.request1(999)
				} else if (that.selectNo == 2) {
					that.request2(999)
				} else {
					that.request3(999)
				}
			}, 1000);
		},
		methods: {
			UserLists() {
				UserList({
					state: 1,
					userId: uni.getStorageSync('userId'),
				}).then(res => {

					if (res.code == 200) {
						this.cheliang = res.rows[0];
						// console.log(123, this.cheliang)
						if (this.cheliang) {
							this.isXuanze = 1
						} else {
							this.isXuanze = 0
						}
						// this.cheliang = res.rows[res.rows.length - 1]
					}

				})
			},

			tuihai() {
				UserBack({
					vehicleId: this.cheliang.vehicleId,
				}).then(res => {

					if (res.code == 200) {
						uni.showToast({
							title: '退还成功',
							duration: 1500
						});
						this.cheliang = {}
						this.UserLists();
					}

				})
			},
			request1(index) {


				OrderList({
					// pageNum: 1,
					// pageSize: 10,
					receiveState: 1,
					sendBy: uni.getStorageSync('userId'),
					orderState: 3
				}).then(res => {
					if (res.code == 200) {
						console.log("111", res)
						if (index == 1) {
							this.JCStotal = res.total;
						} else {
							uni.stopPullDownRefresh();
							this.JCStotal = res.total;
							this.list = res.rows;
							this.selectNo = 1;
						}

					}
				})
			},
			request2(index) {



				OrderList({
					// pageNum: 1,
					// pageSize: 10,
					receiveState: 1,
					orderState: 5,
					sendBy: uni.getStorageSync('userId'),

				}).then(res => {
					if (res.code == 200) {
						// console.log(res)
						// if (index) {
						// 	this.list = res.rows;
						// }

						if (index == 1) {
							this.YCStotal = res.total
						} else {
							uni.stopPullDownRefresh();

							this.selectNo = 2;
							this.list = res.rows.filter(item => item.orderState != 50)
							this.YCStotal = this.list.length
						}

					}
				})
			},
			request3(index) {
				OrderList({
					sendBy: uni.getStorageSync('userId'),
					receiveState: 1,
					orderState: 2
				}).then(res => {
					if (res.code == 200) {
						// if (index) {
						// 	this.list = res.rows
						// }
						console.log(333, res)
						if (index == 1) {
							this.YWCtotal = res.total
						} else {
							uni.stopPullDownRefresh();
							this.YWCtotal = res.total
							this.selectNo = 3;
							this.list = res.rows;
						}

					}
				})
			},

			xuanze() {
				uni.navigateTo({
					url: '../my/gwxz?id=2'
				});
			},
			Toblwc(item) {
				//1备料 3核料 4取件 2 配送 
				let id;
				if (item.orderState == 10) {
					id = 1
				} else if (item.orderState == 20) {
					id = 3
				} else if (item.orderState == 30) {
					id = 4
				} else if (item.orderState == 40) {
					id = 2
				} else if (item.orderState == 50) {
					id = 5
				}

				uni.navigateTo({
					url: './blwc?id=' + id + "&onjs=" + JSON.stringify(item)
				});
			},
			// scrollBottem() {
			// 	this.status = "nomore"
			// },
			// onRefresh() {
			// 	setTimeout(() => {
			// 		this.triggered = false;
			// 	}, 1500)
			// 	this.Order();
			// 	this.UserLists();
			// 	// console.log("进入");
			// },
			// /* 下拉被复位 */
			// onRestore() {
			// 	this.triggered = true; // 需要重置
			// 	console.log("停止");
			// },
			// /* 下拉被中止，没下拉完就松手就会触发 */
			// onAbort() {
			// 	console.log("onAbort");
			// },

		},


	}
</script>
<style lang="scss" scoped>
	page {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;

	}

	::-webkit-scrollbar {
		display: none;
	}

	.home {
		// position: fixed;
		width: 100%;
	}

	.header {
		margin: 0 auto 10px;
		background: #fff;
		border-radius: 5px;
		position: relative;
		left: 0;
		right: 0;
		z-index: 9999;

		.one {
			border-bottom: 1px solid #f9f2f2;
			padding: 17px 0;
			width: 94%;
			margin: 0 auto;
			left: 0;
			right: 0;

			.title {
				left: 32rpx;
				position: relative;
				width: calc(100% - 50rpx);

			}
		}
	}

	.grid-text {
		margin-top: 40rpx;
		color: #000;
	}

	.content {
		width: 90%;
		// overflow-y: scroll;
		left: 0;
		right: 0;
		margin: -68px auto 0;


		.vis {
			// height: 200rpx;
			background: #fff;
			border-radius: 5px;
			padding: 10px;
			z-index: 2000;
			position: relative;
		}
	}



	.hole:after {
		position: absolute;
		height: 90rpx;
		width: 90rpx;
		text-align: center;
		line-height: 90rpx;
		content: attr(data-content);
		border-radius: 50%;
		border: 10px solid #4a9add;
		color: #4a9add;
		font-weight: bold;
		font-size: 40rpx;
		overflow: hidden;
	}

	.home /deep/ .u-size-default {
		padding: 5rpx 11rpx;
	}

	.scrollviewCss {
		height: 73vh;

		::-webkit-scrollbar {
			display: none;
		}
	}

	.home /deep/.u-empty {
		height: auto;
	}
</style>
